<style>
    .order-header-first {
        font-size: small;color: grey;
    }
    .order-header {
        font-size: small;color: grey;padding-left: 5%
    }
    .order-header-text {
        padding-left: 5px;
        color: #444;
    }
    .order-lable-div{
        width: 10%;
        float: left;;
    }
</style>

    @foreach($paginator as $row)
    <div id="order_{{ $row->order_id }}" class="box box-primary">
        <div class="box-header with-border" style="background-color: #f1f9fd">
            <div class="order-lable-div" style="width: 25%;">
                <input type="checkbox" class="grid-row-checkbox" data-id="{{ $row->order_id }}" />
                <span class="order-header-first" style="margin-right: 5px;margin-left: 5px;">订单号: </span><span class="order-header-text">{{ $row->order_id ?? '' }}</span></div>
            <div class="order-lable-div" style="width: 25%;">
                <span class="order-header">下单时间: </span><span class="order-header-text">{{ date('Y-m-d H:i:s', $row->purchase_at) ?? '' }}</span></div>
            <div class="order-lable-div" style="width: 15%;">
                <span class="order-header-first">平台: </span><span class="order-header-text">{{ 'Shopify' }}</span></div>
        </div>

        <div class="box-body table-responsive no-padding">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="10%">平台SKU</th>
                        <th width="20%">产品名称</th>
                        <th width="20%">变体名称</th>
                        <th width="10%">下单数量</th>
                        <th width="10%">状态</th>
                    </tr>
                </thead>

                <tbody>
                    @if($row->shopify_orders_items->isNotEmpty())
                        @foreach($row->shopify_orders_items as $item)
                        <tr>
                            <td>{{ $item->sku ?? '' }}</td>
                            <td>{{ $item->title ?? '' }}</td>
                            <td>{{ $item->name ?? '' }}</td>
                            <td>{{ $item->quantity ?? 0 }}</td>
                            <td>
                                @if($item->status == \App\Models\Shopify\ShopifyOrder::SYNC_YES)
                                    <span style="color: #00a65a;">
                                    {{ \App\Models\Shopify\ShopifyOrder::$_erpSync[$item->erp_sync] ?? '' }}
                                    </span>
                                @else
                                    <span style="color: red;">
                                   {{ \App\Models\Shopify\ShopifyOrder::$_erpSync[$item->erp_sync] ?? '' }}
                                    </span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>

    </div>
    @endforeach

    <script language="JavaScript" type="text/javascript">
        $(function () {

            //单行选择框
            $('.grid-row-checkbox').iCheck({checkboxClass:'icheckbox_minimal-blue'}).on('ifChanged', function () {

                let id = $(this).data('id');
                if (this.checked) {
                    $.admin.grid.select(id);
                    $(this).closest('tr').css('background-color', '#ffffd5');
                } else {
                    $.admin.grid.unselect(id);
                    $(this).closest('tr').css('background-color', '');
                }

            }).on('ifClicked', function () {
                let id = $(this).data('id');

                if (this.checked) {
                    $.admin.grid.unselect(id);
                }else {
                    $.admin.grid.select(id);
                }
            });

            //全选
            $('.grid-select-all').iCheck({checkboxClass:'icheckbox_minimal-blue'});
            $('.grid-select-all').on('ifChanged', function(event) {
                if (this.checked) {
                    $('.grid-row-checkbox').iCheck('check');
                } else {
                    $('.grid-row-checkbox').iCheck('uncheck');
                }
            }).on('ifClicked', function () {
                if (this.checked) {
                    $.admin.grid.selects = {};
                } else {
                    $('.grid-row-checkbox').each(function () {
                        var id = $(this).data('id');
                        $.admin.grid.select(id);
                    });
                }
            });

        });
    </script>
